<template>
  <!-- 面包屑导航 -->
    <div style="margin-top: 20px; margin-left: 20px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><h2>最新公告</h2></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
  <!-- 公告内容 -->
    <div class="announcement-container">
        <h2>{{ announcement.title }}</h2>
        <p>{{ announcement.context }}</p>
    </div>
  <!-- 查看历史公告按钮 -->
    <el-button type="primary" style="float: right; margin-right: 20px;" @click="drawer = true">
        查看历史公告
    </el-button>
    <el-drawer v-model="drawer" title="历史公告" size="40%">
        <div v-for="item in announcements" :key="item.id" @click="showDetails(item)">
            发布日期:{{ item.postTime }}
            <h3>{{ item.title }}</h3>
            <p>{{ truncateText(item.context, 50) }}</p>
            <hr>
        </div>
        <el-drawer
                v-model="innerDrawer"
                title="公告详情"
                :append-to-body="true"
        >
            <p>{{ selectedAnnouncement.postTime }}</p>
            <h2>{{ selectedAnnouncement.title }}</h2>
            <p>{{ selectedAnnouncement.context }}</p>
        </el-drawer>
    </el-drawer>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import request8090 from "../../utils/request8090.js";

const announcement = ref({ title: '', context: '' });
const announcements = ref([]);
const selectedAnnouncement = ref({ title: '', context: '', postTime: '' });

onMounted(() => {
    fetchLatestAnnouncement();
    fetchAnnouncements();
});
// 获取最新的公告
const fetchLatestAnnouncement = () => {
    request8090({
        url: '/admin/getlastestannounce',
        method: 'GET'
    })
        .then(response => {
            if (response.data.errorCode === 200) {
                announcement.value = response.data.data;
            } else {
                console.error('获取失败');
            }
        })
        .catch(error => {
            console.error('请求失败', error);
        });
};
// 获取所有公告
const fetchAnnouncements = () => {
    request8090({
        url: '/admin/getannounce',
        method: 'GET'
    })
        .then(response => {
            if (response.data.errorCode === 200) {
                announcements.value = response.data.data;
            } else {
                console.error('获取失败');
            }
        })
        .catch(error => {
            console.error('请求失败', error);
        });
};

const drawer = ref(false);
const innerDrawer = ref(false);
// 当文本内容大于50时截取前五十个字符并在后面加上...
// 如果没超过50个字符则正常显示
const truncateText = (text, length) => {
    if (text.length > length) {
        return text.substring(0, length) + '...';
    }
    return text;
};
// 展示公告细节
const showDetails = (item) => {
    selectedAnnouncement.value = item;
    innerDrawer.value = true;
};
</script>

<style scoped>
.announcement-container {
    background: linear-gradient(to right, #ece9e6, #ffffff);
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.announcement-container h2 {
    font-size: 24px;
    color: #333;
}

.announcement-container p {
    font-size: 16px;
    color: #666;
}
</style>
